import React, { useState, useEffect } from 'react'
import { useLocation } from 'umi'
import { ArrowLeft, ShareO, ClockO, ShoppingCart, Passed } from '@react-vant/icons';
import { history } from 'umi'
import './ztysteps.less'
import { ShareSheet, Cell, Image, Toast } from 'react-vant'
import instance from '../caipu/serive'
import { json } from 'react-router-dom';


export default function Steps() {
    const location = useLocation()
    const datas = location.state.state
    const [visible, setVisible] = useState(false)
    const [foodlist, setfoodlist] = useState([])
    const [cidlist, setcidlist] = useState([])
    const [shopsadd, setshopsadd] = useState(JSON.parse(sessionStorage.getItem('shopsadd')) || [])


    const options = [
        [
            { name: '微信', icon: 'wechat' },
            { name: '朋友圈', icon: 'wechat-moments' },
            { name: '微博', icon: 'weibo' },
            { name: 'QQ', icon: 'qq' },
        ],
        [
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
            { name: '小程序码', icon: 'weapp-qrcode' },
        ],
    ]
    useEffect(() => {
        let isMounted = true;
        instance.get('/foodlist', { params: { data: datas._id } }).then(({ data, code }) => {
            if (code === 200) {
                setfoodlist(data)
            }
        })
        return () => {
            isMounted = false;
        };
    }, [])
    useEffect(() => {
        let isMounted = true;
        instance.get('/cidlist', { params: { data: datas._id } }).then(({ data, code }) => {
            if (code === 200) {
                setcidlist(data)
            }
        })
        return () => {
            isMounted = false;
        };
    }, [])

    function handleaddshops(data) {
        let index = shopsadd.findIndex(item => item._id === data._id)
        if (index == -1) {
            setshopsadd([...shopsadd, data])
            sessionStorage.setItem('shopsadd', JSON.stringify(shopsadd))
            Toast({
                message: '成功加入购物车',
                icon: <Passed />,
            })
        } else {
            Toast({
                message: '已经加入购物车了',
                icon: <Passed />,
            })
        }
        // console.log(index);


    }
    return (
        // console.log(shopsadd),
        <div>
            <div className='buzhoutop'>
                <div>
                    <ArrowLeft style={{ fontSize: '20px' }} onClick={() => history.go(-1)} />
                    <span style={{ fontSize: '18px' }}>{datas.title}</span>
                </div>

                <ShareO onClick={() => setVisible(true)} style={{ fontSize: '20px' }} />
            </div>
            <div style={{ marginTop: '2vw' }}>
                {/* 显示页面上面的部分 */}
                <Image src={datas.imags}></Image>
                <div className='imgspan'>
                    <div style={{ margin: '5vw 0 0 2vw' }}>
                        <img style={{ width: '40px', height: '40px', verticalAlign: 'middle' }} src='https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E8%8F%9C%E8%B0%B1%E8%AF%A6%E7%BB%86%E9%A1%B5/u3101.png'></img>
                        <span style={{ fontSize: '18px', marginLeft: '2vw' }}>作者:</span>
                        <span style={{ marginLeft: '2vw' }}>133****1237</span>
                    </div>
                    <div style={{ margin: '5vw 2vw 0 0' }}>
                        <ClockO />
                        {
                            new Date(datas.times).getMinutes() <= 58 ?
                                new Date(datas.times).getMinutes() + '分钟' : '一小时以上'

                        }
                        <span style={{ marginLeft: '2vw' }}>  {datas.nums}人做过</span>

                    </div>

                </div>
                <hr style={{ margin: '4vw 0', border: '5px solid #E4E4E4' }} />
                {/* 食物清单数据 */}

                <div>
                    <p style={{ fontSize: '18px', margin: '3vw' }}>食物清单</p>
                    {foodlist.map(item => {
                        return <div key={item._id} className='foodlistbox'>

                            <div style={{ marginLeft: '4vw' }}>
                                <img onClick={() => history.push('/xiangqing')} style={{ height: '110px', width: '110px', borderRadius: '50%' }} src={item.imgs} />
                            </div>
                            <div>
                                <span>{item.name}</span>
                                <span>{item.kgs}</span>

                                <p style={{ color: 'red' }}>￥{item.price}</p>
                            </div>
                            <div className='postbox' >
                                <ShoppingCart
                                    onClick={() =>
                                        handleaddshops(item)
                                    }
                                    style={{ fontSize: '30px', background: '#55A034', borderRadius: '50px' }} />
                            </div>


                        </div>
                    })}
                </div>
            </div>
            {/* 显示烹饪 */}
            <div>
                <hr style={{ border: '7px solid #f5f5f5' }} />
            </div>
            <p style={{ margin: '3vw 0 2vw 2vw' }}>烹饪步骤</p>
            <div className='cidbox'>

                {cidlist.map((item, index) => {
                    return <div key={item._id}>
                        <div  >
                            <p style={{ width: '320px', display: 'inline-block', margin: '3vw 0 3vw 0' }}>
                                <span>{index + 1}.</span>
                                <span >{item.name1}</span>
                            </p>

                        </div>
                        <div>
                            <img style={{ width: '320px', height: '320px' }} src={item.name1img} />
                        </div>

                    </div>
                })}
            </div>
            {/* 显示分享面板 */}
            <div>
                <ShareSheet
                    visible={visible}
                    options={options}
                    // title='立即分享给好友'
                    onCancel={() => setVisible(false)}
                    onSelect={(option, index) => {
                        console.log('option', option)
                        console.log('index', index)
                        setVisible(false)
                    }}
                />
            </div>
            <div style={{ height: '60px' }}>

            </div>
        </div>
    )
}


